<template>
  <div class="w-full h-full flex justify-center items-center">
    <video-player :videoURL="videoData.video_file"></video-player>
  </div>
</template>

<script setup lang="ts">
import {onBeforeMount, onMounted, reactive, ref} from "vue";
import {useRouter} from "vue-router";
import {getVideoDataById} from "@/api/video";

const router = useRouter()
const currenURL = router.currentRoute.value.fullPath

const videoData = reactive({})

onBeforeMount(async ()=>{
  const videoId = Number(currenURL.split("?")[1].split("=")[1])
  const result = await getVideoDataById(videoId)
  for (const key in result.data[0]) {
    videoData[key] = result.data[0][key]
  }
  videoData.video_file = videoData.video_file = "http://localhost:3000/" + videoData.video_file.split("\\").slice(-2).join("/")
  videoData.video_cover = videoData.video_cover = "http://localhost:3000/" + videoData.video_cover.split("\\").slice(-2).join("/")
})

</script>

<style scoped>

</style>
